<template>
  <view class="application">
    <u-navbar :background="navbar.background" :border-bottom="false" :is-back="false"
              :title="userInfo.orgName" :title-color="navbar.color" title-width="300">
      <view slot="right">
        <!-- <view style="width: 70rpx;" @click="navigateToXT">
          <u-icon name="chat" :color="navbar.color" size="40"></u-icon>
          <u-badge type="error" :count="navbar.badge"></u-badge>
        </view> -->
      </view>
    </u-navbar>
    <u-card :border="false" :foot-border-top="false" :head-border-bottom="false" border-radius="0" margin="0"
            padding="0">
      <view slot="head" class="title">{{ $t('我的应用') }}</view>
      <view slot="body">
        <u-grid :border="false" :col="5" class="lz-grid">
          <u-grid-item v-for="(item,index) in mygrids" :key="index" @click="navigetTo(item)">
            <view :class="item.code" :style="item.color" class="iconfont lz-grid-iconfont"></view>
            <view class="grid-text">{{ item.name }}</view>
          </u-grid-item>
          <u-grid-item @click="ApplyEdit">
            <view class="iconfont lz-grid-iconfont icon-xitong" style="background-color: #bdbdbd;"></view>
            <view class="grid-text">{{ $t('编辑') }}</view>
          </u-grid-item>
        </u-grid>
      </view>
      <view slot="foot">
        <u-divider fontSize="24">{{ $t('以上应用展示在首页') }}</u-divider>
      </view>
    </u-card>
    <u-card :border="false" :foot-border-top="false" :head-border-bottom="false" border-radius="0" class="lz-card"
            margin="0" padding="0">
      <view slot="head" class="title">{{ $t('全部应用')}}</view>
      <view v-for="(Coin,cindex) in SysCoin" :key="cindex" slot="body">
        <view class="lz-card-body-title">{{ Coin.name }}</view>
        <u-grid :border="false" :col="5" class="lz-grid">
          <block v-for="(item,index) in Coin.value" :key="index">
            <template v-if="item.name === $t('智能OCR')">
              <u-grid-item v-if="userInfo.ocrEnabled" @click="navigetTo(item)">
                <u-badge v-if="computedMarker(item.name,'show')" :count="computedMarker(item.name)"
                         :offset="[20, 20]"></u-badge>
                <view :class="item.code" :style="item.color" class="iconfont lz-grid-iconfont"></view>
                <view class="grid-text">{{ item.name }}</view>
              </u-grid-item>
            </template>
            <template v-else>
              <u-grid-item @click="navigetTo(item)">
                <u-badge v-if="computedMarker(item.name,'show')" :count="computedMarker(item.name)"
                         :offset="[20, 20]"></u-badge>
                <view :class="item.code" :style="item.color" class="iconfont lz-grid-iconfont"></view>
                <view class="grid-text">{{ item.name }}</view>
              </u-grid-item>
            </template>
          </block>
        </u-grid>
      </view>
    </u-card>
    <u-modal ref="uModal" v-model="modal.show" async-close show-cancel-button :title="$t('印章S号')" @confirm="modalConfirm">
      <view class="slot-content">
        <u-form label-width="120rpx">
          <u-form-item :label="$t('印章S号')" style="padding:20rpx 30rpx;">
            <u-input v-model="modal.deviceid"/>
          </u-form-item>
        </u-form>
      </view>
    </u-modal>
    <u-no-network></u-no-network>
  </view>
</template>

<script>
import {
  mapGetters,
  mapMutations
} from 'vuex'

export default {
  computed: {
    ...mapGetters(['userInfo', 'api']),
    computedMarker() {
      return (name, type) => {
        if (name === '审批处理' && this.Marker.obj.myPendingManagers) {
          if (type === 'show') {//当前是否显示
            return true
          } else {
            return this.Marker.obj.myPendingManagers
          }
        } else if (name === '授权处理' && this.Marker.obj.myPendingKeepers) {
          if (type === 'show') {//当前是否显示
            return true
          } else {
            return this.Marker.obj.myPendingKeepers
          }
        } else if (name === '审计处理' && this.Marker.obj.myPendingAuditors) {
          if (type === 'show') {//当前是否显示
            return true
          } else {
            return this.Marker.obj.myPendingAuditors
          }
        } else if (name === '我的申请' && this.Marker.obj.myPendingApplications) {
          if (type === 'show') {//当前是否显示
            return true
          } else {
            return this.Marker.obj.myPendingApplications
          }
        }
      }
    }
  },
  data() {
    return {
      navbar: {
        color: "#fff",
        background: {
          backgroundColor: '#0079FF'
        },
        badge: 0,
      },
      modal: {
        num: '',
        show: false,
        deviceid: ''
      },
      mygrids: [],//已选择的应用
      SysCoin: [],//全部应用
      Marker: {//角标
        obj: {},
      },
    }
  },
  onLoad() {

  },
  onShow() {
    //获取所有图标
    this.getPhoneIcons()

  },
  methods: {
    //点击系统消息
    navigateToXT() {
      uni.navigateTo({
        url: "../template/systemMessage/systemMessage"
      })
    },
    //应用编辑
    ApplyEdit() {
      uni.navigateTo({
        url: '../application/applicationDrag/applicationDrag'
      });
    },
    //弹出层确定
    modalConfirm() {
      //console.log(this.modal.deviceid);
      this.$u.post(this.api.GLOBAL_device_signet_unlock, {signetId: this.modal.deviceid}).then(res => {
        this.$refs.uModal.clearLoading();
        if (res.code === 200) {
          uni.showToast({
            title: res.msg,
            icon: "none"
          });
        }
      })
    },
    //点击宫格
    navigetTo(item) {
      //console.log(item);
      //兼容旧版本
      if (!item.appType) {
        this.appRouter(item)
        return
      }
      //新版
      if (item.appType === 'app') {
        if (item.name === '印章S号' || item.name === '手动解锁') {
          this.modal.show = true
          return
        }
        uni.navigateTo({url: item.url + '?name=' + item.name});
      } else if (item.appType === 'h5') {
        uni.navigateTo({
          url: '/pages/h5/webview/webview',
          events: {
            confirm(data) {
              //console.log(data);
            }
          },
          success(res) {
            res.eventChannel.emit('pagePramas', item)
          }
        });
      } else if (item.appType === 'mp') {
        //console.log(item);
      }
    },
    appRouter(item) {
      if (item.name === '使用记录') {
        uni.navigateTo({url: '/pages/application/useRecords/useRecords?name=' + item.name});
      } else if (item.name === '申请用章') {
        uni.navigateTo({url: '/pages/application/applicationSeal/applicationSeal?name=' + item.name});
      } else if (item.name === '我的印章') {
        uni.navigateTo({url: '/pages/application/sealManagement/sealManagement?name=' + item.name});
      } else if (item.name === '印章指纹') {
        uni.navigateTo({url: '/pages/application/sealManagement/sealManagement?name=' + item.name});
      } else if (item.name === '手动解锁' || item.name === '印章S号') {
        this.modal.show = true
      } else if (item.name === '高拍仪') {
        uni.navigateTo({url: '/pages/OCR/deviceBind/deviceBind?name=' + item.name});
      } else if (item.name === '智能OCR') {
        uni.navigateTo({url: '/pages/OCR/intelligenceOcr/intelligenceOcr?name=' + item.name});
      } else if (item.name === '盖章记录') {
        uni.navigateTo({url: '/pages/electronicSeal/electronUsageRecord/electronUsageRecord?name=' + item.name});
      } else if (item.name === '电子印章') {
        uni.navigateTo({url: '/pages/electronicSeal/electronicSealList/electronicSealList?name=' + item.name});
      } else if (item.name === '合同管理') {
        uni.navigateTo({url: '/pages/electronicSeal/contractManagement/contractManagement?name=' + item.name});
      } else if (item.name === '电子印签') {
        uni.navigateTo({url: '/pages/electronicSeal/electronicSeal?name=' + item.name});
      } else {
        uni.navigateTo({url: '/pages/application/applicationList/applicationList?name=' + item.name});
      }
    },
    //获取所有图标
    getPhoneIcons() {
      this.$u.post(this.api.GLOBAL_user_getPhoneIcons, {}).then(res => {
        if (res.code === 200) {
          //已选择的应用
          this.mygrids = res.data.MyCoin
          //全部应用
          this.SysCoin = res.data.SysCoin
        }
        //获取角标
        this.cornerMark()
      })
    },
    //获取角标
    cornerMark() {
      this.$u.post(this.api.GLOBAL_application_getDataByOwner, {}).then(res => {
        if (res.code === 200) {
          this.Marker.obj = res.data
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.application {
  background-color: #f0f0f0;
  height: 100%;
  overflow: auto;

  .status_bar {
    height: var(--status-bar-height);
    width: 100%;
  }

  .title {
    text-align: center;
    font-size: 30rpx;
    font-weight: bold;
    letter-spacing: 2rpx;
    padding: 20rpx 30rpx;
  }
}
</style>
